<template>
<!-- 下载数据 -->
<div class="home">
      <div class="title">
          <span>总下载数据(当日）</span>
      </div>
      <div class="row">
          <div class="column-6" id="eachartDom1">
              <div id="totalDownloadData" style=""></div>
          </div>
          <div class="column-3" id="eachartDom2">
              <div id="DownloadTheSource" style=""></div>
          </div>
      </div>
</div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive,inject } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const state = reactive({
    numObj:{},
    activeType:1,
    tableArr:[],
    tableLength:1,
    countDataArr:[
      {name:'文章',label1:'通过数量',val1:'8658',label2:'驳回数量',val2:'55'},
      {name:'视频',label1:'通过数量',val1:'8658',label2:'驳回数量',val2:'558'},
      {name:'简讯',label1:'通过数量',val1:'8658',label2:'驳回数量',val2:'558'},
    ],
    tableType:['已通过','已驳回'],
    activeTableType: 0 ,
  });
export default {
  name: 'downloadData',
  components: {
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      const echarts = inject("ec");//引入
       async function getCount(){
        await _this.$request({
          url:'/api/pcWriter/information_count',
        }).then(res=>{
          if (res.code===1) {
            state.numObj = res.data
          }
        })
      }
     async function getTypeArr(){
        await _this.$request({
          url:'/api/pcWriter/classfly_list',
          data:{
            page:'1',
            pagesize:'11',
          }
        }).then(res=>{
          if (res.code==1) {
            localStorage.writeTypeArr = JSON.stringify(res.data.data)
            store.dispatch('getTypeArr',res.data.data)
            console.log( store.state.writer.typeArr);
          }else{

          }
        })
      };
      function initEchart1(){
        //需要获取到element,所以是onMounted的Hook
            let myChart = echarts.init(document.getElementById("totalDownloadData"));
            // 自适应宽度
            let resizeMyChart = ()=>{
              let domBoxWidth = document.getElementById('eachartDom1').offsetWidth
              let domBoxHeight = document.getElementById('eachartDom1').offsetHeight
              // console.dir(domBoxWidth);
            //   // if (domBoxWidth < 200) {
                 document.getElementById("totalDownloadData").style.width = domBoxWidth - 10 + 'px'
                 document.getElementById("totalDownloadData").style.height = domBoxHeight - 10 + 'px'
            //   // }else{
            //   // }
            }
              resizeMyChart()
              // 绘制图表
              myChart.setOption(
                {
                  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                  title: {
                    text: ''
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'cross',
                      label: {
                        backgroundColor: '#6a7985'
                      }
                    }
                  },
                  // legend: {
                  //   // data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
                  // },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis: [
                    {
                      type: 'category',
                      boundaryGap: false,
                      data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00','8:00', '9:00', '10:00', '11:00','12:00'],
                      // show : true,
                      axisLine :{
                        // show : false,
                      },
                      // x轴上的刻度线
                      axisTick: {
                        show: false
                      }
                    }
                  ],
                  yAxis: 
                    {
                      type: 'value',
                      axisLine: { onZero: false },
                      show: true,
                    }
                  ,
                  series: [
                    {
                      name: 'Line 1',
                      type: 'line',
                      stack: 'Total',
                      smooth: true,
                      lineStyle: {
                        width: 4,
                        color: '#04B418'
                      },
                      showSymbol: false,
                      areaStyle: {
                        opacity: 0.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [
                          {
                            offset: 0,
                            color: '#04B418'
                          },
                          {
                            offset: 1,
                            color: '#fff'
                          }
                        ])
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [140, 232, 101, 264, 90, 340, 250]
                    },
                   
                  ],
              }
              );
              myChart.resize();
              window.onresize = function () {//自适应大小
                  resizeMyChart()
                  myChart.resize();
              };
      }
      function initEchart2(){
        //需要获取到element,所以是onMounted的Hook
            let myChart2 = echarts.init(document.getElementById("DownloadTheSource"));
            // 自适应宽度
            let resizeMyChart2 = ()=>{
              let domBoxWidth = document.getElementById('eachartDom2').offsetWidth
              let domBoxHeight = document.getElementById('eachartDom2').offsetHeight
              console.dir(domBoxWidth);
            //   // if (domBoxWidth < 200) {
                 document.getElementById("DownloadTheSource").style.width = domBoxWidth - 10 + 'px'
                 document.getElementById("DownloadTheSource").style.height = domBoxHeight - 10 + 'px'
            //   // }else{
            //   // }
            }
              resizeMyChart2()
              // 绘制图表
              myChart2.setOption(
                {
                  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                  title: {
                    text: ''
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'cross',
                      label: {
                        backgroundColor: '#6a7985'
                      }
                    }
                  },
                  // legend: {
                  //   // data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
                  // },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis: [
                    {
                      type: 'category',
                      boundaryGap: false,
                      data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00','8:00', '9:00', '10:00', '11:00','12:00'],
                      // show : true,
                      axisLine :{
                        // show : false,
                      },
                      // x轴上的刻度线
                      axisTick: {
                        show: false
                      }
                    }
                  ],
                  yAxis: 
                    {
                      type: 'value',
                      axisLine: { onZero: false },
                      show: true,
                    }
                  ,
                  series: [
                    {
                      name: 'Line 1',
                      type: 'line',
                      stack: 'Total',
                      smooth: true,
                      lineStyle: {
                        width: 4,
                        color: '#04B418'
                      },
                      showSymbol: false,
                      areaStyle: {
                        opacity: 0.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [
                          {
                            offset: 0,
                            color: '#04B418'
                          },
                          {
                            offset: 1,
                            color: '#fff'
                          }
                        ])
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [140, 232, 101, 264, 90, 340, 250]
                    },
                   
                  ],
              }
              );
              myChart2.resize();
              window.onresize = function () {//自适应大小
                  resizeMyChart2()
                  myChart2.resize();
              };
      }
      function changeTableType(_index){
        state.activeTableType = _index
      }
      onMounted(()=>{
        // getTypeArr()
        // getCount()
        initEchart1()
        initEchart2()

      });

      return{
        state,store,router,changeTableType
      }
  },
  data () {
    return {
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  },
}
</script>
<style lang="scss" scoped>
    @media screen and (max-width: 1000px) {
       .home{
         .content{
           width: 100% !important;
         }
       }

    }


    .home{
      width: 100%;
      .title{
        height: 4.875rem;
        display: flex;
        align-items: center;
        padding: 0 2.6875rem;
        
        span{
          color: #000000;
          font-size: 1.25rem;
          font-weight: 600;
        }
      }
      .row{
        display: flex;
        width: 100%;
        padding: 0 1.25rem;
        .column-6{
          flex: 2;
          // width: 58.4375rem;
          height: 27.625rem;
          background: #FFFFFF;
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
          border-radius: 20px;
          margin-right: 1.25rem;
        }
        .column-3{
            flex: 1;
            // width: 35.75rem;
            height: 27.625rem;
            background: #FFFFFF;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
            border-radius: 20px;
        }
      }


    }
</style>
